<template>
	<div>
		<div class="loading-component" v-if="isLoading">
			<div class="content">
				<van-loading type="spinner" />
				<p class="text">{{ loadingText }}</p>
			</div>
			<p></p>
		</div>
		<slot v-else></slot>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
	loadingText: {
		type: String,
		default: '加载中...',
	},
	isLoading: {
		type: Boolean,
		default: true,
	},
});
</script>
<style lang="scss" scoped>
.loading-component {
	position: fixed;
	z-index: 11;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	.content {
		position: absolute;
		text-align: center;
		top: 50%;
		left: 50%;
		// -webkit-transform: translate(-50%,-50%);
		transform: translate(-50%, -50%);
	}
	.icon {
		width: 100px;
	}
	.text {
		color: #666;
		font-size: 12px;
		padding-top: 10px;
		margin-left: 10px;
	}
}
</style>
